<template>
  <div class="demo-title">tabbar/demo1</div>
  <Tabbar @tab-switch="tabSwitch">
    <TabbarItem tab-title="标签1">
      <template #icon>
        <Icon name="home" />
      </template>
    </TabbarItem>
    <TabbarItem tab-title="标签2">
      <template #icon>
        <Icon name="shop" />
      </template>
    </TabbarItem>
    <TabbarItem tab-title="标签3">
      <template #icon>
        <Icon name="order" />
      </template>
    </TabbarItem>
    <TabbarItem tab-title="标签4">
      <template #icon>
        <Icon name="my" />
      </template>
    </TabbarItem>
  </Tabbar>
</template>

<script lang="ts" setup>
  import { Tabbar, TabbarItem } from '@sscd-mobile/tabbar'
  import Icon from '@sscd-mobile/icon'
  const tabSwitch = (item, index) => {
    console.log(item, index)
  }
</script>

<style lang="less" scoped></style>
